<%@ Page Language="C#" %>
 
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<script runat="server">
    protected void Page_Load(object sender, EventArgs e)
    {
        this.Store1.DataSource = new object[]
        {
            new object[] {"1"},
            new object[] {"2"},
            new object[] {"3"},
            new object[] {"4"},
            new object[] {"5"},
            new object[] {"6"},
            new object[] {"7"},
            new object[] {"8"},
            new object[] {"9"},
            new object[] {"10"}
        };
 
        this.Store1.DataBind();
    }
</script>
 
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title></title>
     
    <style type="text/css">
        .red {
            background:red;
        }
        .green {
            background:green;
        } 
    </style>
</head>
<body>    
    <form id="form1" runat="server">
        <script type="text/javascript">
            function getRowClass(record) {
                if (record.data.TestCell > 5) {
                    return 'red';
                }
                if (record.data.TestCell <= 5) {
                    return 'green';
                }
            }
        </script>  
         
        <ext:ResourceManager ID="ResourceManager1" runat="server" />
         
        <h1>Marking Records</h1>
        <p>Demonstrates how to select the records  by color (just edit any cell or insert new record).</p>
        
        <ext:Store ID="Store1" runat="server">
            <Reader>
                <ext:ArrayReader>
                    <Fields>
                        <ext:RecordField Name="TestCell" />                       
                    </Fields>
                </ext:ArrayReader>
            </Reader>
        </ext:Store>
         
        <ext:GridPanel
            ID="GridPanel1"
            runat="server"
            StoreID="Store1"
            StripeRows="true"
            ClicksToEdit="1"
            Title="Test Grid"
            Width="600" 
            Height="350"
            AutoExpandColumn="TestCell">
            <ColumnModel ID="ColumnModel1" runat="server">
                <Columns>
                    <ext:Column ColumnID="TestCell" Header="TestCell" DataIndex="TestCell">
                        <Editor>
                            <ext:TextField ID="TextBox1" runat="server" />
                        </Editor>
                    </ext:Column>                    
                </Columns>
            </ColumnModel>
            <View>
                <ext:GridView ID="GridView1" runat="server" >
                    <GetRowClass Fn="getRowClass" />                       
                </ext:GridView>
            </View>
        </ext:GridPanel>  
    </form>
</body>
</html>